<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>使用定位实现的进度条</title>

        <style type="text/css">
            .wrapper { 
                position: relative ;
                height: 50px ; 
                border: 1px solid blue ; 
                border-radius: 8px ;
                overflow: hidden ;
            }
            .wrapper>* { height: 50px ; }
            .wrapper>.progress-text { 
                position: absolute ;
                left: 0 ;
                top: 0 ;
                z-index: 100 ;
                width: 100% ; 
                line-height: 50px ;
                text-align: center ; /* 让元素中显示的 "百分比文本" 居中对齐 */
            }
            .wrapper>.progress-bar{ 
                position: absolute ;
                left: 0 ;
                top: 0 ;
                z-index: 10 ;
                width: 30% ; /* 用该元素的宽度实现进度条效果 */
                background: rgb(99, 99, 255) ; 
            }
            .wrapper>.progress-bg { 
                position: absolute ;
                left: 0 ;
                top: 0 ;
                z-index: 1 ;
                width: 100% ; 
                background: rgb(200, 200, 200) ; 
            }
        </style>

    </head>
    <body>

        <h3>使用定位实现的进度条</h3>

        <div class="wrapper">
            <div class="progress-text">30%</div>
            <div class="progress-bar"></div>
            <div class="progress-bg"></div>
        </div>
        
    </body>
</html>